<template>
	<view class="classify">
		<scroll-view class="left" scroll-y>
			<view 
				class="left-item flex justify-center align-center"
				@click="leftClickHandle(item, index)" 
				:class="curIndex === index ? 'left-item-active' : ''"
				v-for="(item,index) in cates" 
				:key="item.id">
				<text class="u-line-1">{{ item.name }}</text>
			</view>
		</scroll-view>
		
		<view class="right">
			<view class="right-tags">
				<u-tag
					v-for="(tags, tagsIdx) in subList"
					:key="tagsIdx"
					class="tags" 
					:text="tags.name" 
					mode="dark" 
					borderColor="#fff"
					:bg-color="tabsCurrent == tagsIdx ? '#F4FFF6' : '#F5F5F5'" 
					:color="tabsCurrent == tagsIdx ? '#31CF55' : '#666666'"
					@click="allClassifyClickFn(tags, tagsIdx)" />
			</view>
			<scroll-view 
				class="right-box"
				scroll-y
				@scrolltolower="reachBottom">
				<view class="right-box-page">
					<goodsItem :list="list" size="120rpx" :isBig="false" />
					
					<empty :show="nodata" />
					
					<view v-if="list.length" style="padding: 0 0 30rpx;">
						<u-loadmore
							:status="loadstatus" 
							margin-top="10"
							margin-bottom="10"
							@loadmore="reachBottom"/>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import { getCategory, getGoodsList } from '@/api/common'
	export default {
		data() {
			return {
				curIndex: 0,
				cates: [],
				
				categoryId: '',
				loadstatus: 'loading',
				page: 1,
				pageSize: 10,
				nodata: false,
				list: [],
				
				tabsCurrent: 0,
				tabCategoryId: '',
				subList: []
			}
		},
		onLoad() {
			this.getCates()
		},
		methods: {
			getCates() {
				getCategory().then(res => {
					this.cates = res
					this.categoryId = this.cates[0].id
					this.setSubData()
				})
			},
			getList(isOnce) {
				this.loadstatus = 'loading'
				if (isOnce) {
					this.page = 1
					this.nodata = false
					
					uni.showLoading({
						title: '数据加载中...',
					})
				}
				getGoodsList({
					page: this.page,
					pageNum: this.pageSize,
					category_id: this.tabCategoryId ? this.tabCategoryId : this.categoryId
				}).then(res => {
					// console.log(res)
					if (isOnce) {
						this.list = []
					}
					
					let list = res.data.length ? res.data : []
					this.list = [...this.list, ...list]
					this.loadstatus = list.length === res.total ? 'nomore' : 'loading'
					
					this.page++
					this.nodata = res.total === 0
				}).finally(() => {
					this.skeletonLoading = false
					uni.stopPullDownRefresh()
				})
			},
			leftClickHandle(item, index) {
				if(index == this.curIndex) return;
				
				this.categoryId = item.id
				this.curIndex = index
				this.setSubData()
			},
			setSubData() {
				this.subList = [
					{
						name: '全部',
						id: ''
					},
					...this.cates[this.curIndex].childlist
				]
				this.getList(true)
			},
			allClassifyClickFn(item, index) {
				if (this.tabsCurrent === index) return
				this.tabsCurrent = index
				this.tabCategoryId = item.id
				this.getList(true)
			},
			reachBottom() {
				if (this.loadstatus == 'nomore') return
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
.classify {
	height: 100%;
	display: flex;
	.left {
		width: 160rpx;
		height: 100%;
		background: #f8f8f8;
		&-item {
			height: 100rpx;
			background:rgba(248,248,248,1);
			box-sizing: border-box;
			font-size: 24rpx;
			font-family: PingFangSC-Regular,PingFang SC;
			font-weight: 400;
			color: rgba(102,102,102,1);
			line-height: 1;
			transition: all .3s;
			&-active {
				position: relative;
				color: #333333;
				font-weight: 700;
				background: #ffffff;
				&::before {
					content: "";
					position: absolute;
					border-left: 3px solid $uni-defaultcolor;
					height: 36rpx;
					left: 0;
					top: 50%;
					margin-top: -20rpx;
					border-radius: 0 3px 3px 0;
				}
			}
		}
	}
	.right {
		flex: 1;
		height: 100%;
		background: #fff;
		overflow: hidden;
		&-tags {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-content: flex-start;
			padding: 20rpx;
			.tags {
				margin-right: 16rpx;
				margin-bottom: 16rpx;
			}
			/deep/ .u-tag__text {
				font-size: 28rpx;
			}
		}
		&-box {
			height: 100%;
			&-page {
				height: 100%;
			}
		}
	}
}
</style>
